<template>
  <div class="box">
      <h2>父子通信总结</h2>
      <!-- 
        1.父传子，父组件传递数据给子组件，默认是父变，子变；子变，父不变，还报错 
        2.子想直接修改父：父变，子变，子变，父变，还不报错 ,传递对象。因为本质上对象是引用类型
        3.间接修改：子组件想要修改父组件的值，使用子传父。$emit
       -->
       <h3>传递的基本类型</h3>
       {{username}}
        <hr>
       <input v-model="username">

       <h3>传递对象</h3>
       {{person.username}}
        <hr>
       <input v-model="person.username">


       <v-child :username="username" :person="person"></v-child>
     
  </div>
</template>

<script>

import vChild from './child.vue'

export default {
  components:{
    vChild
  },
  data(){
    return {
        username:'zs',
        person:{
          username:'张三'
        }
    }
  }
}
</script>

<style scoped>

</style>